<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权限表管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link th:href="@{/css/common/bootstrap.min.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/font-awesome.css}" th:rel="stylesheet">
    <link th:href="@{/css/plugins/bootstrap-table/bootstrap-table.min.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/animate.css}" th:rel="stylesheet">
    <link th:href="@{/css/common/style.css}" th:rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content  animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>权限表管理</h5>
                </div>
                <div class="ibox-content">
                    <div id="toolbar">
                        <form class="form-inline" th:action="@{/sysPermission/export}" method="post">
菜单标题：
                                <input class="form-control" id="name" name="name" type="text"
                                      placeholder="请输入菜单标题">
                            &nbsp; &nbsp; &nbsp;
菜单类型：
                            <select class="form-control" id="menuType" name="menuType">
                                <option value="" selected>请选择</option>
                                <option value="0">
                                    一级菜单
                                </option>
                                <option value="1">
                                    子菜单
                                </option>
                                <option value="2">
                                    按钮
                                </option>
                            </select>
                            <br/>
                            <button type="button" class="btn btn-primary"
                                    onclick="$('#table_list').bootstrapTable('refresh');"><i class="fa fa-search"></i>查询
                            </button>
                            &nbsp;&nbsp;
                            <button type="button" class="btn btn-primary"
                                    onclick="reset()"><i class="fa fa-share">重置</i>
                            </button>
                            &nbsp;&nbsp;
                            <button type="submit" class="btn btn-primary"><i class="fa fa-download">导出</i>
                            </button>
                        </form>
                    </div>

                    <div class="row row-lg">
                        <div class="col-sm-12">
                            <!-- Example Card View -->
                            <div class="example-wrap">
                                <div class="example">
                                    <div style="white-space: nowrap; overflow: hidden; overflow-x: scroll; -webkit-backface-visibility: hidden; -webkit-overflow-scrolling: touch;">
                                        <table id="table_list"></table>
                                    </div>
                                </div>
                            </div>
                            <!-- End Example Card View -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script th:src="@{/js/common/jquery.min.js}"></script>
<script th:src="@{/js/common/bootstrap.min.js}"></script>
<script th:src="@{/js/common/content.js}"></script>

<!-- Bootstrap table -->
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js}"></script>
<script th:src="@{/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>

<!-- Peity -->
<script th:src="@{/js/plugins/peity/jquery.peity.min.js}"></script>

<script th:src="@{/js/plugins/layer/layer.min.js}"></script>

<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>
<script type="text/javascript">
    function reset() {
            $("#name").val("");
            $("#menuType").val("");;
    }
</script>
<!-- Page-Level Scripts -->
<script>
    $(document).ready(function () {
        //初始化表格,动态从服务器加载数据
        $("#table_list").bootstrapTable({
            //使用get请求到服务器获取数据
            method: "GET",
            //必须设置，不然request.getParameter获取不到请求参数
            contentType: "application/x-www-form-urlencoded",
            //获取数据的Servlet地址
            url: "/sysPermission/list",
            //表格显示条纹
            striped: true,
            //启动分页
            pagination: true,
            //每页显示的记录数
            pageSize: 10,
            //当前第几页
            pageNumber: 1,
            //记录数可选列表,可以在底部设置每一页可以侠士多少条数据，和pageSize配合使用
            pageList: [5, 10, 15, 20, 25],
            //是否显示刷新按钮
            showRefresh: true,
            //是否启用查询
            search: false,
            //是否启用详细信息视图
            detailView: true,
            //详细信息视图所采用的的方法
            detailFormatter: detailFormatter,
            //表示服务端请求
            sidePagination: "server",
            sortName: "id",
            sortOrder: "asc",
            sortable: 'true',
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "undefined",
            queryParams: function (params) {
                   var parentId = $("#parentId").val();
                   var name = $("#name").val();
                   var url = $("#url").val();
                   var perCode = $("#perCode").val();
                   var menuType = $("#menuType").val();
                   var isLeaf = $("#isLeaf").val();
                   var status = $("#status").val();
                   var description = $("#description").val();
                   var createTime = $("#createTime").val();
                   var grade = $("#grade").val();
                return {
                    pageSize: params.pageSize,                     // 每页记录条数
                    pageNumber: params.pageNumber,
                    // 当前页索引
                            parentId: parentId,
                            name: name,
                            url: url,
                            perCode: perCode,
                            menuType: menuType,
                            isLeaf: isLeaf,
                            status: status,
                            description: description,
                            createTime: createTime,
                            grade: grade,
                };
            },
            toolbar: "#toolbar",
            //设置true 将在点击行时，自动选择rediobox 和 checkbox,自动勾选checkbox
            clickToSelect: true,
            showToggle: true, //1，注意这里必须设置true，onToggle事件才会生效
            onToggle: function (cardView) {
                // alert(JSON.stringify(cardView));
            },
            //json数据解析
            responseHandler: function (res) {
                return {
                    "rows": res.result.records,
                    "total": res.result.total
                };
            },
            //数据列
            columns: [
                //显示checkbox
                // {
                //     checkbox: true
                // },
                     {
                         title: "id",
                         field: "id",
                         sortable: true,
                         titleTooltip: '提示文本',
                         align: 'center',
                         valign: 'middle',
                         halign: 'center',
                         falign: 'center'
                     },
                     {
                         title: "父id",
                         field: "parentId",
                         sortable: true,
                         titleTooltip: '提示文本',
                         align: 'center',
                         valign: 'middle',
                         halign: 'center',
                         falign: 'center'
                     },
                     {
                         title: "菜单标题",
                         field: "name",
                         sortable: true,
                         titleTooltip: '提示文本',
                         align: 'center',
                         valign: 'middle',
                         halign: 'center',
                         falign: 'center'
                     },
                     {
                         title: "路径",
                         field: "url",
                         sortable: true,
                         titleTooltip: '提示文本',
                         align: 'center',
                         valign: 'middle',
                         halign: 'center',
                         falign: 'center'
                     },
                     {
                         title: "菜单编码",
                         field: "perCode",
                         sortable: true,
                         titleTooltip: '提示文本',
                         align: 'center',
                         valign: 'middle',
                         halign: 'center',
                         falign: 'center'
                     },
                     {
                         title: "菜单类型",
                         field: "menuType",
                         sortable: true,
                         titleTooltip: '提示文本',
                         align: 'center',
                         valign: 'middle',
                         halign: 'center',
                         falign: 'center',
                         formatter: function (value, row, index) {
                             if (value == 0)
                                 return '<span class="label label-info">一级菜单</span>';
                             else if (value == 1)
                                 return '<span class="label label-primary">二级菜单</span>';
                             else if (value == 2)
                                 return '<span class="label label-warning">按钮</span>';
                         }
                     },
                     {
                         title: "是否叶子节点",
                         field: "isLeaf",
                         sortable: true,
                         titleTooltip: '提示文本',
                         align: 'center',
                         valign: 'middle',
                         halign: 'center',
                         falign: 'center',
                         formatter: function (value, row, index) {
                             if (value == 0)
                                 return '<span class="label label-info">非叶子结点</span>';
                             else if (value == 1)
                                 return '<span class="label label-primary">叶子结点</span>';
                         }
                     },
                     {
                         title: "菜单状态",
                         field: "status",
                         sortable: true,
                         titleTooltip: '提示文本',
                         align: 'center',
                         valign: 'middle',
                         halign: 'center',
                         falign: 'center',
                         formatter: function (value, row, index) {
                             if (value == 0)
                                 return '<span class="label label-danger">未启用</span>';
                             else if (value == 1)
                                 return '<span class="label label-info">启用</span>';
                         }
                     },
                     {
                         title: "菜单简介",
                         field: "description",
                         sortable: true,
                         titleTooltip: '提示文本',
                         align: 'center',
                         valign: 'middle',
                         halign: 'center',
                         falign: 'center'
                     },
                     {
                         title: "创建时间",
                         field: "createTime",
                         sortable: true,
                         titleTooltip: '提示文本',
                         align: 'center',
                         valign: 'middle',
                         halign: 'center',
                         falign: 'center'
                     },
                     {
                         title: "层级",
                         field: "grade",
                         sortable: true,
                         titleTooltip: '提示文本',
                         align: 'center',
                         valign: 'middle',
                         halign: 'center',
                         falign: 'center'
                     },
             {
                    title: "操作",
                    field: "empty",
                    align: 'center',
                    valign: 'middle',
                    halign: 'center',
                    falign: 'center',
                    //可以把 funcation(value, row, index)封装到外部
                    formatter: function (value, row, index) {
                        var operateHtml = '<button class="btn btn-primary btn-xs" type="button" onclick="edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>&nbsp;修改</button> &nbsp;';
                        operateHtml = operateHtml + '<button class="btn btn-danger btn-xs" type="button" onclick="del(\'' + row.id + '\')"><i class="fa fa-remove"></i>&nbsp;删除</button>';
                        return operateHtml;
                    }
                }]
        });
    });

    function edit(id) {
        layer.open({
            type: 2,
            title: '权限表修改',
            shadeClose: true,
            shade: false,
            area: ['893px', '600px'],
            content: '/sysPermission/toEdit/' + id,
            end: function (index) {
                $('#table_list').bootstrapTable("refresh");
            }
        });
    }

    function Import() {
        $("#file").click();
    }

    function del(id) {
        layer.confirm('确定删除吗?', {icon: 3, title: '提示'}, function (index) {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/sysPermission/delete/" + id,
                success: function (res) {
                    if (res.message == "ok") {
                        layer.msg("删除成功", {time: 500}, function () {
                            $('#table_list').bootstrapTable("refresh");
                            layer.close(index);
                        });
                    } else {
                        layer.confirm("删除失败！", {icon: 3, title: '提示'}, null);
                    }
                }
            });
        });
    }

    //详细信息函数
    function detailFormatter(index, row) {
        var html = [];
        html.push('敬请期待！');
        return html.join('');
    }
</script>


</body>

</html>

